<template>
  <div class="container-fluid">
    <div class="row center-block">
      <div class="col-md-12">
        <div class="row">
          <div class="col-md-12">
            <div class="box-body">
              <div class="box box-primary">
                <div class="box-header with-border">
                  <h3 class="box-title">我的申请列表</h3>
                  <div class="box-tools pull-right">
                  </div>
                </div>
                <div class="box-body">
                  <section class="content" id="approvals">
                    <div class="row">
                      <el-table stripe  :empty-text="emptyText" :row-key='id' :highlight-current-row='true' :data="approvals" border style="width: 100%">
                        <el-table-column fixed type='index' label="序号" :width='80'></el-table-column>
                        <el-table-column v-for='col in this.columns' :fixed='col.fixed?col.fixed:false' :key="col.prop" :width='col.width' :prop='col.prop' :label='col.label' :sortable='col.sortable' :formatter='col.formatter'></el-table-column>
                        <el-table-column fixed="right" label="操作" width="200">
                          <template scope="scope">
                            <el-button type="primary" v-if="isRejected(scope.row)" @click="reEdit(scope.row)">
                              <i class="fa fa-edit">重新编辑</i>
                            </el-button>
                            <!-- <el-button type="success" v-if="isProcessed(scope.row)" @click="ack(scope.row)">
                              <i class="fa fa-edit">确 认</i>
                            </el-button> -->
                          </template>
                        </el-table-column> 
                      </el-table>
                    </div>
                    <!-- <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="currentPage" :page-sizes="pageSizes" :page-size="pagesize" layout="total, sizes, prev, pager, next, jumper" :total="total">
                    </el-pagination> -->
                  </section>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>

    <el-dialog title='用户信息' v-if="viewUserVisible" :before-close="()=>viewUserVisible = false" :visible.sync="viewUserVisible" top='10px' width="80%" :modal="false" size="large">
      <UserDataView v-if='viewUserVisible' :editable='true' ref='userView' :userData='selectedUser'></UserDataView>
      <span slot="footer" class="dialog-footer">
        <el-button @click="viewUserVisible = false">关 闭</el-button>
        <el-button type="primary" @click="reSubmit">重新提交</el-button>
      </span>
    </el-dialog>

    <el-dialog title='提交审核' :visible.sync="approve" :modal="true" width="20%">
      <approveReq  v-if='approve' ref="approveReq" :approvalId='approvalId'></approveReq>
      <span slot="footer" class="dialog-footer">
        <el-button @click="approve = false">关 闭</el-button>
        <el-button type="primary" @click="sendApproval">确 定</el-button>
      </span>
    </el-dialog>

  </div>
</template>
<script>
import approveUtils from "../../common/approveUtils"
import ApproveHandle from "../mycomponents/approve/ApproveHandle"
import approveReq from '../mycomponents/approve/approveReq'
import UserDataView from "./UserDataView"
import Utils from "../../common/utils"
let util = new Utils()
let approveUtil = new approveUtils();
export default {
  name: "Submits",
  components: {
    approveReq,
    ApproveHandle,
    UserDataView
  },
  data: function() {
    return {
      approvalId:'',
      approve:false,
      name: "",
      viewUserVisible:false,
      editVisible: false,
      viewVisible: false,
      columns: approveUtil.getSubmitCols(),
      emptyText: "空",
      id: "id",
      // queryData: util.getDefaultUserQueryData(4),
      approvals: [],
      total: 1,
      selectedApproval: null,
      selectedUser: util.getDefaultSelectedUser()
    };
  },
  created: function() {
    this.$nextTick(() => {
      this.getSubmits();
      approveUtil.listApprover();
    });
  },
  methods: {
    // ack(row) {
    //   var that = this;
    //   approveUtil.ack(
    //     row,
    //     response => {
    //       if (response.body.result == 1) {
    //         that.getSubmits();
    //       } else {
    //         this.showErrorInfo("操作失败,请稍后重试!");
    //       }
    //     },
    //     response => {
    //       this.showErrorInfo("操作失败,请稍后重试!");
    //     }
    //   );
    // },
    getSubmits() {
      var that = this;
      approveUtil.getUserSubmits(
        response => {
          if (response.body.result == 1) {
            console.log(
              "get approvals data id " + JSON.stringify(response.body)
            );
            that.approvals = response.body.body;
          } else if (response.body.result == 2) {
            that.showErrorInfo("权限不够,请联系管理员!");
          }
        },
        response => {
          console.log("get approvals failed:" + response.data);
          that.showErrorInfo("网络异常,请稍后重试!");
        }
      );
    },
    isRejected(row){
      return row.state == 2
    },
    isProcessed(row) {
      return row.state > 0;
    },
    showSucInfo(info) {
      this.$message({
        message: info,
        type: "info"
      });
    },
    showErrorInfo(info) {
      this.$message({
        message: info,
        type: "error"
      });
    },
    reEdit(row){
      console.log('reedit row:'+JSON.stringify(row))
      var that = this
      this.selectedApproval = row
      this.approvalId = row.id
      approveUtil.getApproval(row.id,data=>{
        var dbData = JSON.parse(data.content);
        that.selectedUser.data.id = dbData.id;
        that.selectedUser.data.kpis = dbData.annualAssessment;
        that.selectedUser.data.professionTechs = dbData.technicalPosition;
        that.selectedUser.data.parttimeEdus = dbData.continueTrain;
        that.selectedUser.data.trainings = dbData.onlineWork;
        that.selectedUser.data.relations = dbData.socialReltaion;
        that.selectedUser.data.extrainfo = dbData.otherInfo;
        that.selectedUser.data.userInfo = dbData.baseInfo;
        that.selectedUser.data.projects = dbData.projects;
        that.selectedUser.data.races = dbData.takePart;
        that.viewUserVisible = true;
      },data=>{
        that.showErrorInfo("操作失败,请稍后重试!");
      })
    },
    reSubmit(){
      // 重新提交
      this.approve = true
    },
    sendApproval() {
      // 提交再次申请
      var approveData = {
        approver:'',
        reason:'',
        approvalId:this.approvalId
      }

      if(!util.hasRole(4)){
        approveData = this.$refs.approveReq.getData()
        if(!approveData){
          return
        }
        approveData.approvalId=this.approvalId
      }

      var url = '/hr/person/update'
      if(this.selectedApproval.type == 0){
        url = '/hr/person/add'
      }

      var postData = util.buildDbData(approveData,this.$refs.userView.getData().data)
      var that = this
      this.$http.post(url, JSON.stringify(postData)).then(response => {
        console.log("update response" + response);
        if (response.body.result == 1) {
          console.log('new user id ' + JSON.stringify(response.body));
          that.approve=false
          that.viewUserVisible = false
          util.showSucInfo(this,"重新提交成功！")
          that.getSubmits()
        }
        else{
           util.showErrorInfo(this,"重新提交成功失败,请重试!")
        }
      }, response => {
        console.log('failed:' + response.data)
        util.showErrorInfo(this,"网络异常,请重试!")
      })
      //console.log('user data:' + JSON.stringify(this.userData))
    }
  }
};
</script>

<style>

</style>
